<template>
	<page-container title="转发推广">
		<view class="main-box">

			<!-- Profile section -->
			<view class="profile-section">
				<view class="nullview"></view>
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<text class="username">{{ userInfo.name }}</text>
				<text class="invite-code-label">我的专属邀请码</text>
				<image class="qr-code" :src="qrCodeUrl" mode="aspectFit"></image>
				<text class="qr-hint">请使用微信扫一扫</text>
				<!-- <view class="code-container">
	    <view v-for="(digit, index) in inviteCode" :key="index" class="code-digit">
	      {{ digit }}
	    </view>
	  </view>
	
	  <view class="copy-btn" @tap="copyInviteCode">复制邀请码</view>
	  <view class="line-view"></view>
	  <view class="polygon-view polygon-left"></view>
	  <view class="polygon-view polygon-right"></view> -->

			</view>

			<!-- QR Code section -->
			<!-- 	<view class="qr-section">
	  <image class="qr-code" :src="qrCodeUrl" mode="aspectFit"></image>
	  <text class="qr-hint">请使用微信扫一扫</text>
	</view> -->

			<!-- Action buttons -->
			<view class="action-buttons">
				<view class="action-btn save-btn" @tap="saveImage">
					<image :src="imgList.save" mode="widthFix"></image>
					保存到相册
				</view>
				<view class="action-btn share-btn" @tap="shareToTimeline">
					<image :src="imgList.share" mode="widthFix"></image>
					转发朋友圈
				</view>
			</view>

		</view>

	</page-container>
</template>

<script lang="ts" src="./index.ts">
	
</script>

<style lang="scss" scoped>
	.main-box {
		position: relative;
		z-index: 11;

		.profile-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 94%;
			margin: 0 auto;
			margin-top: 0rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding-bottom: 30rpx;
			// border-bottom: 2px dashed #43d534;
			position: relative;

			.nullview {
				width: 100%;
				height: 100rpx;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				position: absolute;
				top: -40rpx;
			}

			.username {
				margin-top: 0rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.invite-code-label {
				margin-top: 6rpx;
				color: #b5b5b5;
				font-size: 22rpx;
			}

			.qr-code {
				margin-top: 20rpx;
				width: 59%;
			}

			.qr-hint {
				margin-top: 40rpx;
				color: #b5b5b5;
				font-size: 24rpx;
			}
		}

		.code-container {
			display: flex;
			gap: 20rpx;
			margin-top: 30rpx;

			.code-digit {
				width: 60rpx;
				height: 80rpx;
				background: rgba(67, 213, 52, .1);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;
				font-size: 36rpx;
				color: rgba(67, 213, 52, 1);
			}
		}

		.line-view {
			width: 100%;
			border: 0;
			border-bottom: 2px dashed transparent;
			background: linear-gradient(to right, #43D534 20%, transparent 20%, transparent 40%, #43D534 40%);
			// background-color: rgba(67,213,52,1);
			background-size: 10rpx 2rpx;
			background-repeat: repeat-x;
		}

		.polygon-view {
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			background: #f3f3f3;
			/* 半圈的颜色 */
			border-top-left-radius: 100rpx;
			/* 半径为宽度 */
			border-top-right-radius: 100rpx;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;

			&.polygon-left {
				bottom: -25rpx;
				left: -25rpx;
				transform: rotate(90deg);
			}

			&.polygon-right {
				bottom: -25rpx;
				right: -25rpx;
				transform: rotate(-90deg);
			}
		}

		.copy-btn {
			margin-top: 40rpx;
			background: linear-gradient(134deg, #3ac29b 8%, #6ee5cc 94%);
			border: 1px solid #36b591;
			border-radius: 21px;
			box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
			width: 300rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 39rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}

		.qr-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 60rpx;
			width: 94%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 80rpx 0 30rpx 0;

			.qr-code {
				width: 230rpx;
				height: 230rpx;
			}

			.qr-hint {
				margin-top: 30rpx;
				color: #b5b5b5;
				font-size: 24rpx;
			}
		}

		.action-buttons {
			display: flex;
			width: 94%;
			margin: 0 auto;
			margin-top: 20rpx;
			justify-content: space-around;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
			padding: 20rpx 0;

			.action-btn {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				gap: 10rpx;
				background: white;
				padding: 16rpx 0;
				// border-radius: 12rpx;
				font-size: 28rpx;
				color: #000000;

				&:last-child {
					border-left: 1px solid rgba(112, 112, 112, .3);

					// image{
					// 	width: 40rpx;
					// 	height: 40rpx;
					// }
				}

				.btn-icon {
					font-size: 32rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

	}
</style>